<template>
  <div class="employees-container">
    <div class="app-container">
      <page-tools>
        <!-- 插入到left插槽位置 -->
        <template #left>
          <div class="tips">
            <i class="el-icon-info" />
            <span>本月: 社保在缴 公积金在缴</span>
          </div>
        </template>
        <!-- 插入到right插槽位置 -->
        <template #right>
          <el-button type="warning" size="small" @click="$router.push('/import')">导入excel</el-button>
          <el-button type="danger" size="small" @click="exportExcel">导出excel</el-button>
          <el-button type="primary" size="small" @click="addEmployee">新增员工</el-button>
        </template>

      </page-tools>
      <template>
        <el-card style="margin-top:10px">
          <el-table
            :data="list"
            border
          >
            <el-table-column
              type="index"
              :index="(params.page -1) * params.size +1"
              label="序号"
            />
            <el-table-column
              prop="username"
              label="姓名"
            />
            <el-table-column label="头像" width="110">
              <template #default="{row}">
                <!-- <img :src="scope.row.staffPhoto" alt="" width="80"> -->
                <el-avatar v-if="row.staffPhoto" :src="row.staffPhoto" class="avatar" :size="50">
                  <!-- 具名插槽新语法  图片加载出错的时候自动显示 -->
                  <template #error>
                    <!-- <i class="el-icon-picture-outline" /> -->
                    <img src="@/assets/common/bigUserHeader.png" width="80">
                  </template>
                </el-avatar>
                <el-avatar v-else icon="el-icon-user" class="avatar" :size="50">
                  <!-- 具名插槽新语法  图片加载出错的时候自动显示 -->
                  <template #error>
                    <!-- <i class="el-icon-picture-outline" /> -->
                    <img src="@/assets/common/bigUserHeader.png" width="80">
                  </template>
                </el-avatar>
              </template>
            </el-table-column>
            <el-table-column
              prop="workNumber"
              sortable
              label="工号"
            />
            <el-table-column label="聘用形式">
              <template #default="{row}">
                {{ formatEmployee(row.formOfEmployment) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="departmentName"
              label="部门"
            />
            <el-table-column label="入职时间">
              <template #default="{row}">
                {{ formatDate(row.timeOfEntry) }}
              </template>

            </el-table-column>
            <el-table-column label="操作">
              <template #default="{row}">
                <el-button type="text" size="small" @click="goDetail(row.id)">查看</el-button>
                <el-button type="text" size="small" @click="assignRole(row.id)">分配角色</el-button>
                <el-button type="text" size="small" @click="Deletestaff(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>

      </template>
      <template>
        <el-pagination
          :total="total"
          :current-page="params.page"
          :page-size="params.size"
          layout="prev, pager, next"
          @current-change="pageChange"
        />
      </template>
    </div>
    <!-- 父子通信 -->
    <add-employee-vue
      :dialog-visible="dialogVisible"
      @close-dialog="closeDialog"
    />
    <!-- 分配弹框 -->
    <el-dialog
      class="assign-role"
      title="分配角色"
      :visible="showRoleDialog"
      @close="closeRoleDialog"
      @open="openDialog"
    >
      <!-- 这里准备复选框 -->
      <!-- 视图影响数据:选只哪一项 这一项的label属性对应的值会被自动添加到 v-model 绑定的属性身上
            数据影响视图: 如果想要默认选中一项, 要在v-model绑定的数组中添加上 label对应的值即可

            后端要的数据不是中文 而是id?
            如果后端要求的是id 而前端需要展示的是中文 解决办法就是以label绑定id作为传给后端的数据
            以插槽的写法 负责中文提示文案
             -->
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          v-for="item in roleList"
          :key="item.id"
          :label="item.id"
        >
          {{ item.name }}
        </el-checkbox>
      </el-checkbox-group>
      <template #footer>
        <el-button type="primary" size="small" @click="confirmAssgin">确定</el-button>
        <el-button size="small" @click="closeRoleDialog">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import addEmployeeVue from './compoents/add-employee.vue'
import { ListEmployeesAPI, DeleteStaffAPI, fetchAssignRole } from '@/api/empioyee'
import { getUserDetailById } from '@/api/user'
import { getExportData } from '@/utils/execl'
import { fetchRoleListAPI } from '@/api/management'
import dayjs from 'dayjs'
export default {
  name: 'EmployeeIndex',
  components: {
    addEmployeeVue
  },
  data() {
    return {
      params: {
        page: 1,
        size: 3
      },
      list: [],
      total: 0,
      dialogVisible: false,
      showRoleDialog: false,
      roleList: [],
      checkList: [], // 所有选中项的角色id组成的数组
      curId: null// 暂存的当前项的id
    }
  },
  mounted() {
    this.emplist()
  },
  methods: {
    // 获取员工列表
    async emplist() {
      const { rows, total } = await ListEmployeesAPI(this.params)
      this.total = total
      this.list = rows
    },
    // 判断正式正式
    formatEmployee(value) {
      const MAP = {
        1: '正式',
        2: '非正式',
        4: '其他'
      }
      return MAP[value]
    },
    // 日期格式化
    formatDate(value, str = 'YYYY-MM-DD') {
      return dayjs(value).format(str)
    },
    // 删除员工
    Deletestaff(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await DeleteStaffAPI(id)
        this.emplist()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {

      })
    },
    // 分页函数逻辑
    pageChange(page) {
      this.params.page = page
      this.emplist()
    },
    // 点击新增打开弹框
    addEmployee() {
      this.dialogVisible = true
    },
    // 子组件点击关闭弹窗
    closeDialog() {
      this.dialogVisible = false
    },
    // 导出excel
    exportExcel() {
      // import是一个动态导入模块得语法
      // 只有用到它的时候才会动态加载 进行打包不会出现在打包里 不会占用体积
      import('@/vendor/Export2Excel').then(async excel => {
        // 一个表格最重要的俩部分 1.表头 theader 2.表体 tbody
        // 1.先请求当前页的最新的数据
        const res = await ListEmployeesAPI(this.params)// res ->对象数组
        // 2. 把后端最新数据格式化成插件需要的格式
        const headerRelation = {
          '姓名': 'username',
          '手机号': 'mobile',
          '入职日期': 'timeOfEntry',
          '工号': 'workNumber',
          '聘用形式': 'formOfEmployment',
          '部门': 'departmentName'
        }
        const { data } = getExportData(res.rows, headerRelation)
        // 3.配置到对应的位置即可
        excel.export_json_to_excel({
          header: Object.keys(headerRelation), // 配置表头的位置 -> 数组格式
          data: data, // 配置表头的位置 -> 二维数组
          filename: 'execl-employee', // 文件名称
          autoWidth: true, // 单元格宽度是否自动撑开
          bookType: 'xlsx'// excle文件类型
        })
      })
    },
    // 查看员工个人详情
    goDetail(id) {
      // 获取当前id参数
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    },
    // 分配角色
    assignRole(id) {
      this.showRoleDialog = true
      this.curId = id
    },
    // 点击x号关闭弹框
    closeRoleDialog() {
      this.showRoleDialog = false
    },
    // 获取权限数据
    async openDialog() {
      const res = await fetchRoleListAPI({
        page: 1,
        pagesize: 100
      })
      this.roleList = res.rows
      // 获取一下详情
      const detail = await getUserDetailById(this.curId)
      this.checkList = detail.roleIds
    },
    // 分配角色
    async confirmAssgin() {
      await fetchAssignRole({
        id: this.curId,
        roleIds: this.checkList
      })
      this.$message.success('分配角色成功')
      this.showRoleDialog = false
    }

  }

}
</script>
